import React, { Component } from 'react';
import './style.css'
import '../../../../assets/css/iconfont.css'
import api from '../../../../api';
import {withRouter} from 'react-router-dom'

class RecommendContent extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
                personalized:[]
        }
    }
    
    componentDidMount(){
        api.getPersonalized().then(res=>{
            console.log('推荐歌曲数据',res.data.result);
            this.setState({
                personalized:res.data.result
            })
        })
    }

    goSongSheet = (id) =>{
        return()=>{
            document.documentElement.scrollTop = document.body.scrollTop =0;
            this.props.history.push({pathname:'/songsheet/',state:{id:id}})
        }
    }
    render() {
        return (
            <div>
                <div className="recommend-container">
                        <p>推荐歌单</p>
                        <div className="music-container">
                            {
                                this.state.personalized.map((v,i)=>{
                                    return (
                                    <div key={i} onClick={this.goSongSheet(v.id)}>
                                        <img src={v.picUrl} alt="" />
                                        <span className="music-name">{v.name}</span>
                                        <div className="broadcast"><span className="iconfont icon-yinletianchong"></span>{v.trackCount}万</div>
                                    </div>
                                    )
                                })
                            }
                        </div>
                    </div>
            </div>
        );
    }
}

export default withRouter(RecommendContent);